/*
 * @Author: yangzonglong
 * @Date: 2021-05-06 10:41:18
 * @version: v1.0.0
 * @Descripttion: 工具栏
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-07-28 15:38:58
 * @Auditor: 
 */
import React, { useState, useCallback } from 'react';
import { Button, Dropdown, Menu } from 'antd';
import JsonView from './JsonView';
import { DesignRefProps } from './../interface';

const Group = Button.Group;
const MenuItem = Menu.Item;

interface ToolbarProps {
  designRef: { current: DesignRefProps | null }
}

const Toolbar = ({ designRef }: ToolbarProps) => {
  const [jsonVisible, setJsonVisible] = useState(false);
  const showJsonVisible = useCallback(() => setJsonVisible(true), []);
  const cancelJsonVisible = useCallback(() => setJsonVisible(false), []);

  const clearList = useCallback(() => designRef.current?.sync([]), [designRef]);
  const preview = useCallback(() => designRef.current?.changePreview(), [designRef]);

  return (
    <>
      <Group>
        <Button onClick={preview}>预览</Button>
        <Button onClick={showJsonVisible}>JSON</Button>
        <Dropdown.Button overlay={
          <Menu>
            <MenuItem onClick={clearList}>清空</MenuItem>
          </Menu>
        }>更多</Dropdown.Button>
      </Group>
      <JsonView list={designRef.current?.getData().list || []} onCancel={cancelJsonVisible} visible={jsonVisible}/>
    </>
  )
}

export default Toolbar;